import { Form, Popup, SearchBar, Toast } from 'antd-mobile'
import { useEffect, useMemo, useState } from 'react'
import style from './index.module.less'
import PageComponent from '@components/pageComponent'
import PageEmpty from '@components/pageEmpty'
import { DownFill } from 'antd-mobile-icons'
import classNames from 'classnames'
const { Item } = Form

function Leaf ({ data, current, setCurrent }) {
  const [active, setActive] = useState(true)
  const children = useMemo(() => {
    return data.children instanceof Array ? data.children : []
  }, [data])
  return (
    <div className={style.leaf}>
      <div className={classNames(style.item, {[style.active]: current === data.value})} onClick={() => {
        setCurrent(current === data.value ? '' : data.value)
      }}>
        {
          children.length > 0 ? (
            <span className={classNames(style.icon, {[style.active]: active})} onClick={() => setActive(!active)}><DownFill /></span>
          ) : (
            <span className={style.icon} />
          )
        }
        <span>{data.title}</span>
      </div>
      {
        children.length > 0 && (
          <div className={classNames(style.sub, {[style.hide]: !active})}>
            {data.children.map((item, i) => <Leaf data={item} key={i} current={current} setCurrent={setCurrent} />)}
          </div>
        )
      }
    </div>
  )
}

function getList (l) {
  let stack = [...l]
  const r = []
  let o = stack.pop()
  while (o) {
    r.push(o)
    if (o.children instanceof Array && o.children.length) {
      stack = [...stack, ...o.children]
    }
    o = stack.pop()
  }
  return r
}

function renderList (r, current, setCurrent) {
  if (r.length === 0) {
    return (
      <PageEmpty />
    )
  }
  return (
    r.map((li, i) => {
      return (
        <div className={classNames(style.li, {[style.active]: current === li.value})} key={i} onClick={() => {
          setCurrent(current === li.value ? '' : li.value)
        }}>
          {li.title}
        </div>
      )
    })
  )
}

function Inner ({ value, options, visible, setVisible, onChange }) {
  const [current, setCurrent] = useState('')
  const lists = useMemo(() => {
    return getList(options)
  }, [options])
  const [search, setSearch] = useState('')
  const r = useMemo(() => {
    return lists.filter(li => li.title.indexOf(search) > -1)
  }, [search, lists])
  useEffect(() => {
    if (visible) {
      setCurrent(value)
    } else {
      setCurrent('')
    }
  }, [visible, value])
  return (
    <div>
      <span>{value}</span>
      <Popup visible={visible} bodyStyle={{ width: '100vw' }} position='right'>
        <PageComponent
          title='选择案由'
          onBack={() => setVisible(false)}
          right={<a className={style.decide} onClick={() => {
            onChange(current);
            setVisible(false);
          }}>确定</a>}
        >
          {options.length === 0 && <PageEmpty />}
          <div className={style.container}>
            <div className={style.header}>
              <SearchBar value={search} className={style.search} placeholder='请输入案由名称' onChange={v => setSearch(v)} />
            </div>
            <div className={style.body}>
              <div className={style.inner}>
                <div className={style.tree}>
                  {
                    search ? (
                      renderList(r, current, setCurrent)
                    ) : (
                      options.map((item, i) => <Leaf data={item} key={i} current={current} setCurrent={setCurrent} />)
                    )
                  }
                </div>
              </div>
            </div>
          </div>
        </PageComponent>
      </Popup>
    </div>
  )
}

function Main ({ name, label, options }) {
  const [visible, setVisible] = useState(false)
  return (
    <Item label={label} name={name} onClick={() => { setVisible(true) }}>
      <Inner options={options} visible={visible} setVisible={setVisible} />
    </Item>
  )
}

export default Main